import {messages, loadScript} from "share/common";
import React from 'react';
import { connect } from 'react-redux'
import {Badge, Card, Spin, Icon, message, Divider} from 'antd';
const { Meta } = Card;
import FinancialCourseService from 'containers/help-center-user/financial-course/financial-course.service'
import "styles/help-center-user/financial-course/financial-course-list.scss"
import CryptoJS from 'crypto-js';
class FinancialCourseList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: false,
      showPlayer: false,
      marginLeft: 100,
      marginTop: 100,
      token: "",
    }
  }

  componentWillMount(){
    this.getCourseList();
  }

  componentDidMount(){
    try {
      let player = polyvPlayer();
    }catch (e) {
      loadScript("//player.polyv.net/script/player.js")
    }
  }

  getCourseList = () => {
    this.setState({
      loading: true,
    });
    FinancialCourseService.getCourseList().then(res => {
      this.setState({
        data: res.data,
        loading: false,
      })
    }).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  //点击某一视频时
  checkCourse = (e, item) => {
    //首先按需加载引入保利威的js
    try {
      let player = polyvPlayer();
    }catch (e) {
      loadScript("//player.polyv.net/script/player.js")
    }
    let arr = item.code.match(/\{(.*?)\}.*?/g);
    if(arr && arr.length) {
      this.setState({
        showPlayer: true,
      }, () => {
        //取出需要用的视频信息
        let attr = arr[0];
        attr = attr.replace(/\'/g, "\"");
        let setting = JSON.parse(attr);
        //获取后端加密后的用户签名
        this.getSign(setting.vid, setting)
      })
    }else{
      message.error(messages('help-center-user.key23')/*该课程目前暂无可播放视频*/)
    }
  };

  //获取后端加密后的用户签名
  //这个接口是我们汇联易内部做的，为了防止关键key写在前端有暴露风险
  getSign = (videoId, setting) => {
    let params = {
      videoId : videoId,  // 视频对应vid
      ts : new Date().getTime(),      // 时间戳
      viewerId : this.props.user.id,      // 自定义用户 id
    };
    FinancialCourseService.getToken(params).then(res => {
      setting.wrap = '#player';
      setting.playsafe = res.data.data.token;
      //拿到token，实例化播放器
      let player = polyvPlayer(setting);
      this.setState({
        marginLeft: -(setting.width / 2 - 110),
        marginTop: -(setting.height / 2),
      })
    }).catch(err => {
    })
  };

  render () {
    const {data, showPlayer, loading, marginLeft, marginTop} = this.state;
    return (
      <div className={"financial-course-list"}>
        <h3>{messages('help-center-user.key27')/*课程列表*/}</h3>
        <Divider/>
        {
          showPlayer &&
          <div className="player-area">
            <div id={"player"} style={{marginLeft: marginLeft, marginTop: marginTop}}/>
            <div className="player-area-close"
                 onClick={() => {this.setState({showPlayer: false})}}><Icon type="close" /></div>
          </div>
        }
          <div className="financial-course-cards-area">
            {loading ? <Spin spinning={loading}/> :
              data.length ? data.map((item, index) => {
                  return (
                    <div key={index}
                         className="financial-course-cards"
                         onClick={(e) => {
                           this.checkCourse(e, item)
                         }}>
                      <Card
                        hoverable
                        style={{width: 252}}
                        bodyStyle={{padding: 15}}
                        cover={<img alt="出错了" src={item.imgUrl} style={{height: 140}}/>}>
                        <Meta title={item.title}
                              description={item.subTitle}/>
                      </Card>
                      <div className="clear"/>
                    </div>
                  )
                })
                : <h4>{messages('help-center-user.key24')/*暂无课程*/}</h4>
            }
          </div>
        <div className="clear"/>
      </div>
    )
  }
}

FinancialCourseList.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    user: state.login.user,
  }
}

export default connect(mapStateToProps)(FinancialCourseList);
